<template>
  <div>
    Child1
    <!--
    <p>count is {{ $store.state.count }}</p>
    <p>count count is {{ $store.getters.getCount }}</p>
    <p>double count is {{ $store.getters.getDoubleCount }}</p>
    <p>double count is {{ $store.getters.getDoubleCount }}</p>
    <p>double count is {{ $store.getters.getDoubleCount }}</p>
    <p>double count is {{ $store.getters.getDoubleCount }}</p>
    -->
    <p>count is {{ count }} {{ aaa }} {{ ccc }}</p>
    <p>count is {{ getCount }} double count is {{ getDoubleCount }}</p>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
  computed: {
    ...mapState('counter', ['count', 'aaa', 'ccc']),
    ...mapGetters('counter', ['getCount', 'getDoubleCount'])
    // count () {
    //   return this.$store.state.count
    // },
    // aaa () {
    //   return this.$store.state.aaa
    // },
    // ccc () {
    //   return this.$store.state.ccc
    // },
    // getCount () {
    //   return this.$store.getters.getCount
    // },
    // getDoubleCount () {
    //   return this.$store.getters.getDoubleCount
    // }
  },
  mounted () {
    console.log(this.$store)
    console.log(this.$store.state.counter.count)
    console.log(this.$store.getters['counter/getCount'])
    console.log(this.$store.getters['counter/getDoubleCount'])
  }
}
</script>
